<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/product.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3631467_zx9tky7ion.css">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <header>
            <div class="top"></div>
            <nav>
                <button><a href="./index.html">Back</a></button>

                <p>产品详情</p>
                <div>
                    <i class="iconfont icon-xingxing"></i>
                </div>
            </nav>
        </header>
        <div class="banner">
            <img src="./images/productmain.png" alt="">
        </div>
        <div class="banner-bottom">
            <div class="banner-bottom-top">
                <div>
                    <p>￥9999</p>
                </div>
                <button>购买</button>
            </div>
            <div class="banner-bottom-bottom">
                <div><i class="iconfont icon-xingxing"></i>
                    <p>好评度<span>150%</span></p>
                </div>
                <div><span>共9999条评论></span></div>
            </div>
        </div>

        <div class="main">
            <div class="main-top"><span>适用用户</span><span>></span></div>
            <div class="main-center">
                <div>
                    <img src="./images/product_2.png" alt="">
                    <div>正佳店</div>
                </div>
                <div>
                    <span>万岁寿司（正佳店）</span>
                    <div>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <span>10分</span>
                    </div>
                    <span>离你100m</span>
                    <span>查看详情>></span>
                </div>
                <button>进入</button>
            </div>
            <div class="main-center">
                <div>
                    <img src="./images/product_2.png" alt="">
                    <div>体育西店</div>
                </div>
                <div>
                    <span>万岁寿司（体育西店）</span>
                    <div>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <span>10分</span>
                    </div>
                    <span>离你100m</span>
                    <span>查看详情>></span>
                </div>
                <button>进入</button>
            </div>
        <div class="main-center">
                <div>
                    <img src="./images/product_2.png" alt="">
                    <div>昌岗店</div>
                </div>
                <div>
                    <span>万岁寿司（昌岗店）</span>
                    <div>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <span>10分</span>
                    </div>
                    <span>离你100m</span>
                    <span>查看详情>></span>
                </div>
                <button>进入</button>
            </div>
       <div class="main-center">
                <div>
                    <img src="./images/product_2.png" alt="">
                    <div>珠江新城店</div>
                </div>
                <div>
                    <span>万岁寿司（珠江新城店）</span>
                    <div>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <i class="iconfont icon-xingxing"></i>
                        <span>10分</span>
                    </div>
                    <span>离你100m</span>
                    <span>查看详情>></span>
                </div>
                <button>进入</button>
            </div>
        </div>
        <footer>
            <ul>
                <li><a href="./index.html"><i class="iconfont icon-shouyetianchong"></i>首页</a></li>
                <li><a href="./classify.html"><i class="iconfont icon-fenlei"></i>分类</a></li>
                <li><a href="./find.html"><i class="iconfont icon-faxian"></i>发现</a></li>
                <li><a href="./my.html"><i class="iconfont icon-wode"></i>我的</a></li>
            </ul>
        </footer>
    </div>

</body>

</html>